半透明边框

由于背景色会侵入到边框所在的范围，如果想要半透明的边框，可以使用background-clip属性。这个属性规定背景的绘制区域，其初始值为border-box，如果将属性值设置为padding-box，背景就会被裁剪到内边距框。
HTML代码：

<div class="parent">
    <div class="test">
        this is a test
    </div>
</div>

CSS代码：

.parent{
    width: 200px;
    height: 200px;
    background: deepskyblue;
    display: flex;
}
.test{
    margin: 50px auto;
    padding: 0;
    width: 50px;
    height: 50px;
    border: 10px solid hsla(0,0%,100%,.5);
    background: white;
    background-clip: padding-box;
}

效果如下：

多重边框

想要使用多重边框，但是又不想添加无用的额外元素破坏HTML结构。可以使用box-shadow或者outline来模拟多重边框。

`box-shadow`方案

想要模拟多重边框，可以利用box-shadow的第四个参数，用来设置阴影的尺寸。一个正值的阴影加上两个为零的偏移量以及为零的模糊值，得到的效果就像一道实线的边框。

恰巧，box-shadow支持都好分隔语法，可以创建任意数量的阴影。

于是可以模拟出多重边框。例如：
HTML代码：

<div class="box-shadow-test"></div>

CSS代码：

.box-shadow-test{
    margin: 50px auto;
    padding: 0;
    width: 50px;
    height: 50px;
}
.box-shadow-test{
    background: #6b0;
    box-shadow: 0 0 0 5px #655,
    0 0 0 10px deeppink,
    0px 2px 5px 15px rgba(0,0,0,.6);
}

效果如下：

`outline`方案

box-shadow虽然可以模拟边框，但是有一个缺陷，就是只能模拟实线边框，不能模拟出虚线边框。而且，可以设置outline-offset属性来控制它和元素边缘之间的间距，如果设置成负值可以模拟出缝边效果。比如：
HTML代码：

<div class="outline-a"></div>

CSS代码：

.outline-a{
        margin: 50px auto;
        padding: 0;
        width: 50px;
        height: 50px;
        background: yellowgreen;
        border: 10px solid #655;
        outline: 1px dashed deeppink;
        outline-offset: -5px;
        border-radius: 5px;
    }

效果如下：

可以看出来，使用outline方案，适用于两层边框的场景。如果需要更多的边框，只能使用box-shadow方案了。

outline还有一个缺陷，outline模拟的边框并不能贴合border-radius产生圆角。比如：

代码：

<div class="outline-b"></div>
.outline-b{
    margin: 50px auto;
    padding: 0;
    width: 50px;
    height: 50px;
    background: yellowgreen;
    border: 10px solid #655;
    outline: 5px solid deeppink;
    border-radius: 5px;
}

效果如下：